$primary-color: #1c78ef;
$primary-color-end: #1c78ef;
$primary-color-active: #3390ff;

$success-color: #1aad19;
$success-color-end: #51a351;
$success-color-active: #33c771;

$warning-color: #fe9400;
$warning-color-end: #f5b03d;
$warning-color-active: #080808;

$danger-color: #e64340;
$danger-color-end: #ff7070;
$danger-color-active: #b2352d;

$info-color: #909399;
$info-color-end: #909399;
$info-color-active: #82848a;

// 辅助色
$help-color: #f5f5f5;

// 标题常规文字
$title-color: #333;
// 副标题
$title-color2: #666;
// 副标题
$title-color3: #999;
// 次内容
$text-color: #969799;
// 特殊禁用色
$disable-color: #cccccc;

$hover-color: #f2f3f5;

$background-color: #f8f8f8;

$white: #ffffff;
$black: #000000;

$placeholder-color: #c8c9cc;
$border-color: #d9d9d9;

$font-family: PingFang SC, Microsoft YaHei, Helvetica, Hiragino Sans GB, SimSun,
  sans-serif !default;

// Font
$font-size-0: 10px;
$font-size-1: 12px;
$font-size-2: 14px;
$font-size-3: 16px;
$font-size-4: 18px;
$font-weight-bold: 400;

// button
$button-border-radius: 2px;
$button-border-width: 1px;

//input
$input-border-bottom: $border-color !default;
$input-disabled-color: #c8c9cc !default;

$font-size-small: $font-size-1 !default;
$font-size-base: $font-size-2 !default;
$font-size-large: $font-size-3 !default;

/* border-top */
%bt1 {
  position: relative;
  &::before {
    position: absolute;
    box-sizing: border-box;
    content: ' ';
    pointer-events: none;
    right: 0;
    top: 0;
    left: 0;
    border-top: 1px solid $border-color;
    transform: scaleY(0.5);
    transform-origin: top;
    @extend %px-media;
  }
}
/* border-bottom */
%bb1 {
  position: relative;
  &::after {
    position: absolute;
    box-sizing: border-box;
    content: ' ';
    pointer-events: none;
    right: 0;
    bottom: 0;
    left: 0;
    border-bottom: 1px solid $border-color;
    transform: scaleY(0.5);
    @extend %px-media;
  }
}

%border1 {
  position: relative;
  border: none;
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid $border-color;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    transform: scale(0.5);
    transform-origin: left top;
    @media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49) {
      &::before {
        transform: scale(0.5);
      }
    }

    @media (-webkit-min-device-pixel-ratio: 2.5) {
      &::before {
        transform: scale(0.33333);
      }
    }
  }
}

%px-media {
  @media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49) {
    &::before {
      transform: scaleY(0.5);
    }
  }

  @media (-webkit-min-device-pixel-ratio: 2.5) {
    &::before {
      transform: scaleY(0.33333);
    }
  }
}
